<template>
    <view :style="'direction:' + $t('dir')" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
        <navbar :title="$t('wodeshoucang')" />

        <view class="main">
            <view class="row items-center px-md" style="position: sticky; z-index: 999;background: linear-gradient(#c8eadf, #d3eee5);" :style="{ top: headerArea.title_height + headerArea.menuTop + 'px' }">
                <view v-for="(item, i) in types" :key="i" class="pl-md p-relative button py-sm" @click="typeTap(item)">
                    <view :class="item.id == activeType ? '' : 'text-gray'" class="p-relative" style="z-index: 1">{{ item['name' + $t('k')] }}</view>
                    <image v-if="activeType == item.id" src="/static/images/index/active.png" mode="scaleToFill" style="width: 42.5rpx; height: 30rpx; top: 50%; left: 50%; transform: translate(-50%, -20%); z-index: 0" class="p-absolute" />
                </view>
            </view>
            <view class="d-flex flex-wrap items-center justify-between pa-md pt-xs mt-md">
                <house-row v-for="(item, i) in houses" :item="item" :key="i" />
            </view>
            <u-empty v-if="!houses || houses.length == 0" mode="list" icon="/static/images/empty.png" :text="$t('no_content')" style="padding-top: 250rpx" />
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            houses: [],
            current_page: 1,
            last_page: 1,
            types: [
                { id: 0, name_ug: 'ساتىدىغان ئۆي', name: '卖房' },
                { id: 1, name_ug: 'ئىجارە ئۆي', name: '租房' },
            ],
            activeType: 0,
        }
    },
    computed: {
        headerArea() {
            let area = uni.getSystemInfoSync()
            // #ifdef MP-WEIXIN
            let menu = uni.getMenuButtonBoundingClientRect()
            return {
                status_height: area.statusBarHeight,
                title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
                menuLeft: menu.left,
                menuTop: menu.top - (menu.top - area.statusBarHeight),
            }
            // #endif
            // #ifndef MP-WEIXIN
            return {
                status_height: area.statusBarHeight,
                title_height: uni.upx2px(82),
                menuLeft: 0,
                menuTop: uni.upx2px(88),
            }
            // #endif
        },
    },
    onLoad() {
        this.getList()
    },
    onShow() {},
    onPullDownRefresh() {
        uni.stopPullDownRefresh()
    },
    onReachBottom() {
        if (this.current_page < this.last_page) {
            this.current_page += 1
            this.getList()
        }
    },
    methods: {
        typeTap(item) {
            this.activeType = item.id
            this.current_page = 1
            this.getList()
        },
        getList() {
            uni.showLoading({
                title: '',
            })
            this.$uniapi('/myCollect', { page: this.current_page, pageSize: 10, type: this.activeType == 0 ? 'sell' : 'rent' })
                .then((res) => {
                    uni.hideLoading()
                    if (res.code == 0) {
                        let house = res.data
                        if (this.current_page == 1) this.houses = house.data
                        else this.houses.push(...house.data)
                        this.current_page = house.current_page
                        this.last_page = house.last_page
                    }
                })
                .catch((err) => {
                    uni.hideLoading()
                })
        },
    },
}
</script>
